/*
 * @Description: 绘制地图组件
 * @Author: buwei.huang
 * @Date: 2019-07-23 14:21:29
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-08 14:12:05
 */
<template>
  <div id="amap">
  </div>
</template>
<script>
import AMap from 'AMap'
import AMapUI from 'AMapUI'
export default {
  data() {
    return {
      map: null
    }
  },
  computed: {
    currentPos() {
      return this.$store.getters.pos
    }
  },
  watch: {
    currentPos(pos) {
      // 清空地图上的所有覆盖物
      this.map.clearMap()
      this._drawCurrentPosition(pos)
    }
  },
  mounted() {
    this._initMap()
  },
  methods: {
    _initMap() {
      // let self = this
      this.map = new AMap.Map('amap', {
        zoom: 16, // 设置地图显示的缩放级别
        viewMode: '2D', // 设置地图模式
        lang: 'zh_cn', // 设置地图语言类型
        jogEnable: true, // 地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制,
        scrollWheel: true // 地图是否可通过鼠标滚轮缩放浏览，默认为true。此属性可被setStatus/getStatus 方法控制
      })
      AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
        var positionPicker = new PositionPicker({
          mode: 'dragMap',
          map: this.map
          // iconStyle: { // 自定义外观
          //   url: require('../assets/location.png'),
          //   ancher: [15, 35],
          //   size: [30, 43]
          // }
        })
        // if (this.currentPos) {
        //   positionPicker.start()
        // }
        positionPicker.start()
        positionPicker.on('success', positionResult => {
          this.$emit('noSite', false)
          let center = this.map.getCenter()
          let amapInfoList = []
          for (let i = 0; i < positionResult.regeocode.pois.length; i++) {
            amapInfoList.push(positionResult.regeocode.pois[i])
          }
          if (amapInfoList.length === 0) {
            this.$emit('noSite', true)
          }
          console.warn(positionResult, center, amapInfoList)
          // 更新store中的gps数据
          this.$store.dispatch('fetchAmapInfoList', amapInfoList)
        })
      })
    },
    _drawCurrentPosition(pos) {
      // 定位地图上的中心点
      console.log(pos)
      this.map.setCenter([pos.longitude, pos.latitude])
      // 清空地图上的所有覆盖物
      // this.map.clearMap()
    }
  }
}
</script>
<style>
#amap {
  width: 100%;
  height: calc(100% - 396px);
}
.amap-logo {
  display: none !important;
}
.amap-copyright {
  display: none !important;
}
</style>
